<template>
  <div>
    <div ref="echarsDom" style="width: 80%;height: 200px;margin: 0 auto;"></div>
  </div>
</template>

<script setup lang="ts">
// import 'default-passive-events'
import * as echarts from 'echarts'
import "echarts-gl";
import "echarts/lib/chart/bar"
import {Ref, ref, onMounted, watch} from 'vue';
const echarsDom: Ref<HTMLElement | any> = ref(null)
const props = defineProps({
  chartSize: {
    type: Object
  },
  chartOption: {
    type: Object
  }
})
watch(()=>props.chartOption,(newVal) => {
  init()
},{deep:true})
onMounted(() => {
  init()
})
function init() {
  let option:any = props.chartOption
  const myEcharts = echarts.init(echarsDom.value);
  myEcharts.clear();
  echarsDom.value.style.width = props.chartSize?.width
  echarsDom.value.style.height = props.chartSize?.height
  myEcharts.setOption(option);
  myEcharts.resize()
}
defineExpose({ init })
</script>

<style lang="scss" scoped></style>
